<div ng-controller="horizon.app.core.network_qos.actions.AddQoSRuleController as ctrl" class="form-group">
    <label class="control-label  required">
      <translate>QoS Policy ID</translate>
      <span class="hz-icon-required fa fa-asterisk"></span>
    </label>
    <input class="form-control ng-pristine ng-untouched ng-valid" ng-value="ctrl.qospolicy" name="qospolicyid" readonly>
    <label class="control-label  required">
      <translate>QoS Policy Name</translate>
      <span class="hz-icon-required fa fa-asterisk"></span>
    </label>
    <input class="form-control ng-pristine ng-untouched ng-valid" ng-value="ctrl.qospolicyname" name="qospolicyname" readonly>
    <label class="control-label required">
        <translate>Rule Type</translate>
        <span class="hz-icon-required fa fa-asterisk"></span>
      </label>
      <select class="form-control switchable ng-pristine ng-untouched ng-valid"
              ng-model="rule_type"
              ng-options="val as label for (val, label) in ctrl.rule_types"
              name="add-rule"
              ng-change="ctrl.onRuleTypeChange(rule_type)">
      </select>
      <div ng-show="rule_type === 'bandwidth_limit'">
        <label class="control-label  required">
          <translate>Max bandwidth (in kbps)</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input class="form-control ng-pristine ng-untouched ng-valid"
                ng-model="bwd.maxkbps"
                name="maxkbps"
                ng-change="ctrl.bwdLimit(bwd)">
        <label class="control-label  required">
          <translate>Max Burst Size (in kbps)</translate>
        </label>
        <input class="form-control ng-pristine ng-untouched ng-valid"
                ng-model="bwd.maxburstkbps"
                name="maxburstkbps"
                ng-change="ctrl.bwdLimit(bwd)">
        <label class="control-label  required">
          <translate>Direction</translate>
        </label>
        <select class="form-control switchable ng-pristine ng-untouched ng-valid"
                ng-model="bwd.direction"
                ng-options="val as label for (val, label) in ctrl.directions"
                name="direction"
                ng-change="ctrl.bwdLimit(bwd)">
        </select>
      </div>
      <div ng-show="rule_type === 'dscp_marking'">
        <label class="control-label  required">
          <translate>DSCP mark</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input class="form-control ng-pristine ng-untouched ng-valid"
                ng-model="dscpmark"
                name="dscpmarking"
                placeholder="valid DSCP marks are:
                0, 8, 10, 12, 14, 16, 18, 20, 22, 24, 26, 28, 30, 32, 34, 36, 38, 40, 46, 48, 56"
                ng-change="ctrl.onDSCPChange(dscpmark)">
      </div>
      <div ng-show="rule_type === 'minimum_bandwidth'">
        <label class="control-label  required">
          <translate>Minimum bandwidth (in kbps)</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input class="form-control ng-pristine ng-untouched ng-valid"
                ng-model="mb.minkbps"
                name="minkbps"
                ng-change="ctrl.minBandwidth(mb)">
        <label class="control-label  required">
          <translate>Direction</translate>
        </label>
        <select class="form-control switchable ng-pristine ng-untouched ng-valid"
                ng-model="mb.direction"
                ng-options="val as label for (val, label) in ctrl.directions"
                name="direction"
                ng-change="ctrl.minBandwidth(mb)">
        </select>
      </div>
      <div ng-show="rule_type === 'minimum_packet_rate'">
        <label class="control-label  required">
          <translate>Minimum packet rate (in kpps)</translate>
          <span class="hz-icon-required fa fa-asterisk"></span>
        </label>
        <input class="form-control ng-pristine ng-untouched ng-valid"
                ng-model="mpr.minkpps"
                name="minkpps"
                ng-change="ctrl.minPacketRate(mpr)">
        <label class="control-label  required">
          <translate>Direction</translate>
        </label>
        <select class="form-control switchable ng-pristine ng-untouched ng-valid"
                ng-model="mpr.direction"
                ng-options="val as label for (val, label) in ctrl.ppsDirections"
                name="direction"
                ng-change="ctrl.minPacketRate(mpr)">
        </select>
      </div>
    </div>